@import "src/@notadd/scss/notadd";

.dashboard-analysis {
    padding: 20px;

    section {
        margin-bottom: 30px;
    }

    mat-card {
        .mat-card-header-text {
            width: 100%;
        }

        mat-icon {
            font-size: 20px !important;
        }

        .arrow-up {
            margin-right: -10px;
            transform: rotate(-90deg);
            color: #4caf50;
            vertical-align: bottom;
        }

        .arrow-down {
            margin-right: -5px;
            transform: rotate(90deg);
            color: #f44336;
            vertical-align: top;
        }
    }

    mat-card-content {
        div.area-chart[echarts] {
            height: 50px;
            width: 100%;
        }
    }
    
    .card {
        border: none;
        background: #fff;

        &.card-shadow {
            box-shadow: 0 1px 1px rgba(0,0,0,.05);
        }
    }
    
    .map {
        height: 400px;
        width: 100%;
    }

    .scatter-map {
        height: 400px;
        width: 100%;
    }

    .trend-bar {
        height: 300px;
        width: 100%;
    }

    .counter {
        background: #fff;
        width: 100%;
        height: 100px;
        padding: 20px 30px;
        font-size: 14px;
        color: #757575;

        .counter-label {
            display: block;
        }

        .counter-number-group, .counter-number {
            font-size: 32px;
            color: #424242;
        }
        
    }

    .light-blue-text {
        color: #03a9f4; /*#1e88e5*/
    }

    .font-medium {
        font-weight: 500;
    }

    .weather-card {
        color: #5b616e;
        
        .mat-card-header-text {
            margin: 0;
            color: #5b616e;
        }

        .realtime {
            mat-icon {
                font-size: 45px !important;
            }
        }

        .table {
            width: 100%;
            color: #9098ac;
            font-size: 15px;

            tr {
                line-height: 40px;

                td {
                    width: 50%;
                }
            }
        }

        mat-card-actions {
            padding-top: 20px;
            min-height: 50px;
        }
    }

    .sales-card {
        color: #9098ac;

        .sales-prediction, .sales-difference {
            width: 100%;
            height: 130px;
        }

        .mat-card-header-text {
            margin: 0;
            color: #5b616e;
        }

    }
    
}
